<template>
  <div style="display:flex;">
    <el-input
      @focus="handleFocus"
      v-if="textVisible"
      :value="text"
    >
      <i slot="suffix" style="margin-right:5px" @click="handleFocus" class="el-icon-search"></i>
    </el-input>
    <el-autocomplete
      ref="ac"
      style="width:100%"
      suffix-icon="el-icon-edit"
      v-else
      v-model="filter"
      :style="styles"
      :popper-class="propPopperClass"
      :fetch-suggestions="querySearch"
      placeholder="请输入筛选内容"
      @keyup.enter.native="handleEnterPress"
      @keyup.esc.native="handleBlur"
      @blur="handleBlur"
      @select="handleSelect"
    >
      <template slot-scope="{item}">
        <div :class="getRowClass(item)">
          <el-row>
            <el-col :span="1">
              <div>
                <i v-if="isSelected(item)" class="el-icon-success" style="color:green;margin:5px"/>
                <i v-else-if="isFirst(item)" class="el-icon-thumb" style="color:blue;margin:5px"/>
                <i v-else class="el-icon-success" style="color:ghostwhite;margin:5px"/>
              </div>
            </el-col>
            <el-col
              v-for="col in columns"
              :key="col[propValueField]"
              :span="getColumnSpan(col)"
            >
              <div :class="col.name">{{ item[col.name] }}</div>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-autocomplete>
  </div>
</template>
<script>
export default {
  data() {
    return {
      textVisible: true,
      filter: '',
      text: '',
      popperClass: this.propPopperClass,
      rows: this.propRows,
      filterRows: this.propRows,
      columns: this.propColumns
    }
  },
  props: {
    propTextField: {
      type: String,
      default: 'name'
    },
    propValueField: {
      type: [String, Number],
      default: 'id'
    },
    propPopperClass: {
      type: String
    },
    propColumns: {
      type: Array,
      required: true
    },
    propRows: {
      type: Array,
      required: true,
      default: () => []
    },
    value: {
      type: String
    },
    propWidth: {
      type: [String, Number],
      default: null
    },
  },
  watch: {
    propRows(values) {
      this.rows = values
      this.filterRows = values
    },
    value(newVal) {
      if (!newVal) {
        this.text = ''
      } else {
        this.text = this.getTextByValue(newVal)
      }
    }
  },
  created() {
  },
  mounted() {
  },
  computed: {
    styles() {
      if (this.strings.isBlank(this.propWidth)) {
        return {}
      }
      const style = {}

      let width = typeof this.propWidth  === 'string' ? this.propWidth : this.propWidth + 'px'
      style.width = width + '!important'
      return style
    }
  },
  components: {
  },
  methods: {
    isSelected(item) {
      return item[this.propValueField] == this.value
    },
    isFirst(item) {
      return this.filterRows && this.filterRows[0] && this.filterRows[0][this.propValueField] == item[this.propValueField]
    },
    getTextByValue(val) {
      const item = this.rows.find(row => {
        return row[this.propValueField] == val
      })
      if (item) {
        return item[this.propTextField]
      } else {
        return ''
      }
    },
    getCurrentRow() {
      return this.propRows.filter(row => row[this.propValueField] == this.value)[0]
    },
    querySearch(queryString, cb) {
      const filterMethod = this.$listeners['filter-method'] || this.createFilter
      let results = queryString ? this.rows.filter(filterMethod(queryString)) : this.rows
      this.filterRows = results
      cb(results)
    },
    createFilter(queryString) {
      return (item) => {
        let found = false
        this.columns.forEach(col => {
          if (col.search && item[col.name].toLowerCase().indexOf(queryString.toLowerCase()) > -1) {
            found = true
            return true
          }
        })
        return found
      }
    },
    handleSelect(item) {
      this.textVisible = true
      this.text = item[this.propTextField]
      this.$emit('input', item[this.propValueField])
      this.$emit('select', item)
    },
    handleEnterPress() {
      if (this.filterRows && this.filterRows.length > 0) {
        this.handleSelect(this.filterRows[0])
      } else {
        this.handleBlur()
      }
    },
    handleBlur() {
      setTimeout(() => {
        this.filter = ''
        this.textVisible = true
      }, 200)
    },
    getRowClass(row) {
      const fun = this.$listeners['row-class']
      if (fun) {
        return fun(row)
      }
    },
    getColumnSpan(col) {
      const avgSpan = Math.round(22 / this.columns.length)
      return col.span || avgSpan
    },
    handleFocus() {
      this.textVisible = false
      this.$nextTick(() => {
        this.$refs.ac && this.$refs.ac.focus()
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
